<template>
  <Echart
    id="left-top-danger"
    :options="options"
    class="left_top_inner"
    v-if="pageflag"
    ref="charts"
  />
  <Reacquire v-else @onclick="getData" style="line-height: 200px">
    重新获取
  </Reacquire>
</template>

<script>
export default {
  name: "left-top",
  data() {
    return {
      options: {},
      pageflag: true,
    };
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    getData() {
      let res = {
        甲烷: 34,
        氢气: 1,
      };
      const data = [];
      for (const i in res) {
        const obj = { name: i, value: res[i] };
        data.push(obj);
      }
      this.$nextTick(() => {
        this.init(data);
      });
      this.pageflag = true;
    },
    init(newData) {
      this.options = {
        color: ["#2648B2", "#8F64FF", "#26A5E4"],
        grid: {
          top: "10%",
          left: "3%",
          right: "3%",
          bottom: "6%",
          containLabel: true,
        },
        series: [
          {
            type: "pie",
            radius: [30, 55],
            // with: 500,
            // height: '99%',
            itemStyle: {
              borderColor: "#7187C5",
              borderWidth: 1,
            },
            label: {
              // alignTo: 'edge',
              formatter: "{name|{b}}\n{value|{c}}",
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                name: {
                  fontSize: 12,
                  color: "#7187C5",
                },
                value: {
                  fontSize: 15,
                },
              },
            },
            labelLine: {
              length: 20, // 第一段线 长度
              length2: 20, // 第二段线 长度
              show: true,
            },
            data: newData,
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
